lab components / Forms and input

Text area

Enables users to input multiple lines of text. Ideal for free-form responses, comments, or descriptions.

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { [object Object] } from "@siteimprove/fancylab";

The default variant is a blank field ready for user input. It visually indicates that it is interactive and accepts text. You can wrap FormElementWrapper around the TextArea to provide labelling and supplemental information.

Use cases:

Long-form text input (comments, descriptions, reviews).
Open-ended questions in forms.
Any situation where a single line of text is insufficient.

CodeHTML output

const [value, setValue] = useState("");
return <TextArea placeholder="Placeholder text" value={value} onChange={setValue} />;

#Disabled

A disabled variant is visually distinct, appearing grayed out. It cannot be interacted with and does not accept input.

Best practices:

When the information is for display only.
When certain conditions haven't been met (e.g., a form field becomes enabled after another is filled out).
To prevent accidental changes to existing text.

CodeHTML output

const [value, setValue] = useState("");

return <TextArea placeholder="Disabled" value={value} onChange={setValue} disabled />;

#Invalid

An invalid variant has a red border or visual cue to indicate an error (e.g., the text entered doesn't match the required format).

Best practices:

When input validation fails.
To clearly communicate errors to the user and help them fix the issue.

Error Handling:

Provide clear and specific error messages immediately below the text area.
Guide users on how to fix the issue
Use inline validation to give real-time feedback as users type. Wrap FormElementWrapper around the TextArea to provide labelling and supplemental information.

CodeHTML output

const [value, setValue] = useState("");

return <TextArea placeholder="This is invalid" value={value} onChange={setValue} invalid />;

#Properties

CodePropsHTML output

<undefined placeholder="Placeholder text" value="value" onChange={() => {...}} />

Long-form text entry (comments, descriptions, reviews).
Open-ended questions.
Any content exceeding a single line.

#Placement

TextArea is typically used in the following places:

Form: For collecting user feedback, descriptions, etc, (e.g Create survey).
Data entry: When large amounts of text are needed, (e.g Bulk keyword import).

#Style

Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your TextArea to existing components for visual consistency.
Ensure adequate sizing for the expected input length. Consider dynamic height adjustments.
If there's a character limit, include a character counter.
Optional vs. Mandatory:
- Clearly indicate required fields with "(required)" or an asterisk (*).
- If most fields are optional, only mark required fields. If most are required, mark optional fields.